import { settings, changeSetting } from "../settings";
import { themes } from "../engines";

function isColor(value) {
  return `select mb-1 ${Object.keys(themes).includes(value) ? `input-${value}` : ""}`;
}

const SettingSelect = ({ area, prop, desp, options }) => (
  <>
    <label class="label" for={area + prop}>
      {desp} ({String(options.length)})
    </label>
    <select
      value={String(settings.value[area][prop])}
      class={isColor(options[settings.value[area][prop]])}
      id={area + prop}
      onChange={(event) => {
        changeSetting(area, prop, Number.parseInt(event.target.value, 10));
      }}
    >
      {options.map((item, index) => (
        <option key={item} value={String(index)}>
          {item}
        </option>
      ))}
    </select>
  </>
);

export default SettingSelect;
